<template>
  <div v-if="DialogInput" class="DialogInput">
    <el-dialog :title="dialogTitle" :visible.sync="DialogInput" width="420px" :close-on-click-modal="false" @close="dialogClose">
      <el-form ref="pageForm" :model="pageForm" :rules="rules" label-width="80px">
        <el-form-item label="物品名称" prop="name">
          <el-input v-model="pageForm.name" placeholder="请输入物品名称" />
        </el-form-item>
        <el-form-item label="物品分类" prop="categoryId">
          <el-select v-model="pageFormCategoryId" placeholder="请选择...">
            <el-option v-for="item in goodsCategoryReqData" :key="item.id" :label="item.categoryName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="物品条码">
          <el-input v-model="pageForm.barCode" placeholder="请输入物品条码" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="pageForm.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="right">
        <el-button size="medium" round @click="dialogClose">取 消</el-button>
        <el-button size="medium" round type="primary" @click="onSubmit()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopId: 1,
      whichClick: '',
      goodsCategoryReqData: [],
      DialogInput: false,
      dialogTitle: '新增物品资料',
      pageFormCategoryId: '',
      pageForm: {
        name: '',
        categoryId: '',
        barCode: '',
        remark: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入物品资料名称', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请选择物品分类', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // ...mapGetters(["userInfo"])
  },
  watch: {
    // userInfo(newValue, oldValue) {
    //   console.log(newValue)
    // }
  },
  created() {

  },
  mounted() {

  },
  destroyed() {

  },
  methods: {
    /* 数据请求*/
    /* 按钮点击*/
    onSubmit() {
      this.$refs.pageForm.validate(async(valid) => {
        if (valid) {
          this.DialogInput = false
          this.pageForm.categoryId = this.pageFormCategoryId
          console.log('提交前的pageForm数据')
          console.log(this.pageForm)
          this.$emit('emitDialogSave', this.pageForm)
        }
      })
    },
    /* other*/
    dialogShow(parentData) {
      this.pageForm = {}
      this.DialogInput = true
      this.dialogTitle = parentData.dialogTitle
      this.shopId = parentData.shopId
      if (parentData.rowItem) { // 编辑特有
        console.log('编辑')
        const rowItem = parentData.rowItem
        console.log('得到的数据')
        console.log(rowItem)
        this.pageForm = rowItem
        this.pageFormCategoryId = rowItem.categoryId
      }
      this.getGoodsCategory()
    },
    dialogClose() {
      this.DialogInput = false
      this.pageForm = {}
    },

    getGoodsCategory() {
      const data = { shopId: this.shopId }
      this.khReqMethod({ url: '/depositAdmin/config/goodsCategory', data, method: 'get', isLoading: true, isParams: true }).then(res => {
        const repData = res.data
        this.goodsCategoryReqData = repData
        if (repData && repData.length > 0) {
          if (!this.pageForm.categoryId) {
            this.pageForm.categoryId = repData[0].id
            this.pageFormCategoryId = repData[0].id
          }
        } else { // 没有分类
          this.pageForm.categoryId = ''
          this.pageFormCategoryId = ''
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .DialogInput {

  }
  .inputValueClass{
    margin-top: 15px;
  }
  .dialog-footer{

  }
</style>
